<template>
	<div>
		<ul class="email-inbox-nav" >
			<li class="email-inbox-item"  v-for="(e,index) of emails">
				<div class="email-inbox-header" @click="showEmail(index)">
					<span class="email-header-status">{{e.flag == true? "未读":"已读"}}</span>
					<span class="email-header-name">{{e.from}}</span>
					<div class="email-header-summary">
						<span class="summary-title">{{e.subject}}</span>
					</div>
					
					<div class="email-inbox-oper">
						<span>{{e.date}}</span>
						<i title="回复邮件" class="icon-reply"></i>
					</div>
				</div>
				<div class="email-inbox-main" v-show="!!e.show?e.show:false">
					<div class="email-main-editor">
						<span>发件人:</span>
						<span>{{e.from}}</span>
					</div>
					<div class="email-main-reciver">
						<span>收件人:</span>
						<span>{{e.to}}</span>
					</div>
					<div class="email-main-timer">
						<span>时间:&nbsp</span>
						<span>{{e.date}}</span>
					</div>
					<div class="email-main-content" v-html="e.html">
						
					</div>
					<div class="email-main-atta">
						<ul>
							附件:
							<li v-for="atta of e.attachments">
								<a :href="atta.url" tagert="_blank">{{atta.name}}</a>
							</li>
						</ul>
					</div>
				</div>
			</li>
			
		</ul>
		<div class="block" style="margin-top: 20px;">
				<el-pagination
				layout="prev, pager, next"
				:total="totalCount"
				@current-change="currentChange"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	var moment = require('moment');
	moment.locale('zh-cn'); 
	export default {
	  name: 'EmailInbox',
	  data () {
	    return {
	    	curPage:0,
	    	totalCount:0,
	    	emails:[
	    		{
	    			flag:true,
	    			from:"fjx550558@hotmail.com",
	    			subject:"Hello",
	    			to:"550558263@qq.com",
	    			date:"2018-10-12",
	    			html:`<html><head>
					<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
					</head>
					<body>
					<p>Hello<img src="/file/fjx550558@hotmail.com/7/attachments0"></p>
					</body>
					</html>`,
					show:false
	    		},
	    		{
	    			flag:false,
	    			from:"fjx550558@hotmail.com",
	    			subject:"Hello",
	    			to:"550558263@qq.com",
	    			date:"2018-10-11",
	    			html:`<html><head>
					<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
					</head>
					<body>
					<p>Hello<img src="/file/fjx550558@hotmail.com/7/attachments0"></p>
					</body>
					</html>`,
					show:false
	    		}
	    	]
	    }
	  },
	  methods:{
	  	showEmail:function(index){
	  		this.emails[index].show=!this.emails[index].show;
	  	},
	  	getEmails:function(page){
	  		this.$ajax({
	  			method:'get',
	  			url:"http://localhost:8081/email/inbox?seen="+this.$route.query.seen+"&page="+page,
	  			dataType : "jsonp",
	  		}).then((res)=>{
	  			var now = new Date().getTime();
	  			var emails = res.data.emails
	  			for(let e of emails){
	  				e.show = false;
	  				if(!!e.attachments) {
	  					e.attachments = e.attachments.split(";");
	  					for(let index in e.attachments){
	  						var name = e.attachments[index].substring(e.attachments[index].lastIndexOf("/")+1,e.attachments[index].length);
	  						var url = e.attachments[index]
	  						e.attachments[index] = {
	  							name:name,
	  							url:url
	  						}
	  					}
	  				}
	  				  if(now- e.date < 60 * 60 * 1000){
	  				  	e.date = moment(new Date(e.date)).startOf('hour').fromNow();
	  				  }else if(now - e.date < 24 * 60 * 60 * 1000){
	  				  	e.date = moment(new Date(e.date)).startOf('day').fromNow();
	  				  }else{
	  				  	e.date = moment(new Date(e.date)).format('MMMM Do YYYY, h:mm:ss a');
	  				  }
	  			}
	  			this.emails = emails;
	  			this.totalCount = res.data.count;
	  			this.curPage = page;
	  		}).catch(function(err){
	  			console.info(err);
	  		});
	  	},
	  	currentChange:function(page){
	  		this.getEmails(page);
	  	},
	  },
	  created:function(){
	  	console.info(this.$route.params);
	  	console.info(this.$route.query);
	  	this.getEmails(this.curPage);
	  },
	  watch:{
		'$route' (to, from) {
		    this.$router.go(0);
		}
	  },
	}
</script>

<style scoped>
</style>
